{#await}

Posted on 2023-02-07 by

henrikvilhelmberglund

Here we have a component that fetches the selected dog breed as an image using Dog API.

Right now it's a bit wonky because every time you change the dog breed you get a missing image icon while the image is loading.
Selected breed: undefined
dog
<script>
	let selectedBreed;
	const breeds = ["affenpinscher", "african", "airedale"];

	let imgSrc;
	let hasError = false;

	$: fetchDogImage(selectedBreed);

	function fetchDogImage(breed) {
		hasError = false;
		imgSrc = null;
		fetch(`https://dog.ceo/api/breed/${breed}/images/random`)
			.then((response) => response.json())
			.then((obj) => (imgSrc = obj.message))
			.catch((error) => (hasError = true));
	}
</script>

<select name="" bind:value={selectedBreed} id="">
	{#each breeds as breed}
		<option value={breed}>{breed}</option>
	{/each}
</select>

Selected breed: {selectedBreed}

<hr w-full />

{#if hasError}
	<p>oops! error!</p>
{:else}
	<img src={imgSrc} alt="dog" />
{/if}

One thing to note is that you can skip some of the blocks if you don't need them, for example the loading text or the error handling.